import React, { useState, useEffect } from 'react';
import { Pie } from '@ant-design/charts';
import { Empty } from 'antd';
import { percentAdjust } from '../../../../../utils';
import { getCorporationRateData } from 'admin/servers/modules/DataStatistics';
interface IProp {
  /**
   * 计时器
   */
  timer: number;
}
const ChartPie: React.FC<IProp> = (props: IProp) => {
  const [data, setData] = useState<any>([]);
  useEffect(() => {
    fetchData(props.timer);
  }, [props.timer]);
  const fetchData = (timer: number) => {
    // Mock：后端数据-begin
    // let res: any = [
    //   {
    //     type: "通信",
    //     value: 27,
    //   },
    //   {
    //     type: "电商",
    //     value: 10,
    //   },
    //   {
    //     type: "咨询",
    //     value: 18,
    //   },
    //   {
    //     type: "金融",
    //     value: 15,
    //   },
    //   {
    //     type: "物流",
    //     value: 10,
    //   },
    //   {
    //     type: "医疗",
    //     value: 10,
    //   },
    //   {
    //     type: "教育",
    //     value: 15,
    //   },
    // ];
    // let list = [];
    // let len = res.length;
    // for (let i = 0; i < len; i++) {
    //   list.push(res[i].value);
    // }

    // for (let i = 0; i < len; i++) {
    //   res[i].rate = percentAdjust(list, i, 1); // 给data添加百分比
    // }

    // setData(res);
    // return;
    // Mock：后端数据-end
    getCorporationRateData()
      .then(res => {
        if (res.code === 0) {
          const { data } = res;
          console.log('Row:2-1 企业行业分布-后端返回数据', data);
          if (!data) {
            return;
          }
          const newData = data.map(item => {
            return {
              type: item.industryName,
              value: item.companyNum,
              rate: 0,
            };
          });
          // 数值百分比，凑100%
          const list = [];
          const len = newData.length;
          for (let i = 0; i < len; i++) {
            list.push(newData[i].value);
          }

          for (let i = 0; i < len; i++) {
            newData[i].rate = percentAdjust(list, i, 1); // 给data添加百分比
          }
          setData(newData);
        }
      })
      .catch(error => {
        console.error(`系统异常: ${JSON.stringify(error)}`);
      });
  };

  const config = {
    data: data,
    height: 300,
    padding: [20, 120],
    appendPadding: 10,
    angleField: 'value',
    colorField: 'type',
    color: ['#F75D54', '#0FB3F8', '#26D981', '#FAC334', '#2EDADC', '#7A57D1', '#FF8A5C'],
    radius: 1,
    innerRadius: 0.6,
    label: {
      type: 'inner',
      offset: '-50%',
      // 百分比展示
      // content: function content(_ref: any) {
      //   var percent = _ref.rate + "%";
      //   return percent;
      // },
      // 数量展示，最小值大于1能显示
      // content: "{value}",
      content: function content(_ref: any) {
        return _ref.value || '';
      },
      autoRotate: false,
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    // 鼠标交互
    // interactions: [{ type: "element-active" }],
    pieStyle: {
      lineWidth: 0,
    },
    statistic: {
      // 中心统计数据
      title: {
        formatter: function formatter() {
          return '';
        },
      },
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
        },
        formatter: function formatter() {
          return '';
        },
      },
    },
  };
  if (!data.length) {
    return (
      <div className="chart-noData">
        <Empty image="/webapp/empty.svg" />
      </div>
    );
  }
  return (
    <>
      <ul className="custom-legend">
        {data.length > 0 &&
          data.map(
            (item: any, index: number) =>
              item.value > 0 && (
                <li className={`level${index}`} key={index}>
                  <span>{item.type}</span>
                  {item.rate || 0}%
                </li>
              )
          )}
      </ul>
      <Pie
        {...config}
        legend={false}
        // 无法配置legend文字颜色
        // legend={{
        //   position: "right",
        //   custom: true, // 关键字段，告诉 G2，要使用自定义的图例
        //   items: config.data.map((obj: any, index: any) => {
        //     return {
        //       name: obj.type, // 对应 itemName
        //       value: obj.rate, // 对应 itemValue
        //       marker: {
        //         symbol: "circle", // marker 的形状
        //         style: {
        //           r: 5, // marker 图形半径
        //           fill: config.color[index], // marker 颜色，使用默认颜色，同图形对应
        //         },
        //       }, // marker 配置
        //     };
        //   }),
        //   itemWidth: 300,
        //   itemHeight: 28,
        //   itemName: {
        //     style: {
        //       fontSize: 12,
        //       fill: "#fff",
        //     },
        //   },
        //   itemValue: {
        //     style: {
        //       fontSize: 12,
        //       fill: "#fff",
        //     }, // 配置 itemValue 样式
        //     formatter: (val: any) => `${val}%`, // 格式化 itemValue 内容
        //   },
        // }}
      />
    </>
  );
};

export default ChartPie;
